<template>
	<view class="content">
		<view class="top-view">
			<image class="top-box-bg" src="../../static/receive/img-renwu-150-peitu@2x.png" mode="scaleToFill"></image>
			<view class="box topBox">
				<view class="box-content">
					<text>{{awardDetail}}</text>
				</view>
			</view>
			<image class="show-icon" src="../../static/share/img-xiangqing-196-bubu@2x.png" mode="aspectFit"></image>
			<image class="lianjie" src="../../static/share/img-60-lianjie@2x.png" mode="aspectFit"></image>
		</view>

		<view class="box bottomBox">
			<view class="bottom-title">
				奖品
			</view>
			<view class="bottom-detail">
				<view class="award-detail">
					<!-- <image src="../../static/receive/img_leyu_shizi_peitu.png" mode="aspectFit"></image> -->
					<image :src="datas.img_url" mode="aspectFit"></image>

					<text>{{datas.prize_name || ''}}一套</text>
				</view>
			</view>
			<view class="bottom-title">
				收货信息
			</view>
			<view class="bottom-detail">
				<view class="info-detail">
					<form >
						<view class="cu-form-group">
							<view class="title">收 货 人:</view>
							<input :disabled="hasGot || hasAddress" :placeholder="datas.receiver_name || '请填写'" name="name" :value="name" id="name" placeholder-class="placeholderStyle" @input="onNameInput"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">联系电话:</view>
							<input :disabled="hasGot || hasAddress" :placeholder="datas.receiver_phone || '请填写'"  name="phone" :value="phone" id="phone" placeholder-class="placeholderStyle" @input="onpPhoneInput"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">所在区域:</view>
							<input v-if="hasGot || hasAddress" :disabled="hasGot||hasAddress"  :placeholder="datas.receiver_city" :value="address" id="address" placeholder-class="placeholderStyle" @input="onaAddressInput"></input>

							<picker v-else mode="region" @change="onRegionChange" :value="region">
								<view class="picker" style="text-align: left;">
									<view v-if="region.length>0">
										{{`${region[0]} ${region[1]} ${region[2]}`}}
									</view>
									<view v-if="region.length === 0" class="placeholderStyle">
										请选择
									</view>
								</view>
							</picker>
						</view>
						<view class="cu-form-group" >
							<view class="title">详细地址:</view>
							<input :disabled="hasGot || hasAddress"  :placeholder="datas.receiver_address || '请填写'" name="address" :value="address" id="address" placeholder-class="placeholderStyle" @input="onaAddressInput"></input>
						</view>
					</form>
				</view>
			</view>
		</view>

		<button v-if="hasGot" class="cu-btn btn-open" @click="onNextClick">
				<image src="../../static/me/btn-anniu-130-zhengchang@2x.png" mode="scaleToFill"></image>
				<text>继续闯关</text>
		</button>
		<button v-else class="cu-btn btn-open" @click="onOpenCheckpoint">
				<image src="../../static/me/btn-anniu-130-zhengchang@2x.png" mode="scaleToFill"></image>
				<text>提交信息</text>
		</button>
	</view>
</template>

<script>
let app = getApp();
import {toast,isEmpty,} from "../../utils/util.js"
import {getNextPoint} from "../../tool/pubTool.js"

import {
	playMp3,
    playTouchTone
} from "../../tool/pubTool.js"
import {
	getUserBoxPrizeGet,

} from "../../tool/userTool.js"

export default {
	data() {
		return {
			// awardDetail:"恭喜你，获得闵行区文创产品一套，快去填写收货信息吧。",
			awardDetail: '',
			region:[],//区域
			name:"",
			phone:"",
			address:"",
			boxList:null,
			box_id:null,
			datas: '',
			hasGot: false,
			hasAddress: false
		};
	},
	async onLoad(option) {
		await this.$onLaunched;
		this.box_id = option.boxId;
		let itemStr = option.itemStr;
		console.log(itemStr)
		console.log('传递的参数')
		let datas =itemStr &&  JSON.parse(itemStr);
		console.log(datas)
		console.log('传递的数据')
		// if(datas){
		// 	// console.log('本身已经有了 地址信息了')
		// }else{
		// 	datas = uni.getStorageSync("addressData");
		// 	this.hasGot = true
		// }
		console.log('本地的数据')
		console.log(uni.getStorageSync("addressData"))
		if(uni.getStorageSync("addressData")){
			datas = {
				...datas,
				...uni.getStorageSync("addressData")
			}
			this.hasAddress  = true
			console.log('添加果树地址之后的')
			console.log(datas)
			console.log('添加果树地址之后的')
		}else{
			console.log('么与地址')
			console.log(datas)
			console.log('么与地址')
		}
		this.datas = datas
		console.log(datas)
		console.log('处理过的数据')
		if(datas){
			this.awardDetail = `恭喜你，获得${datas.prize_name || ''}一套，快去填写收货信息吧。`
		}
		if(datas.status == 3){ // 中级未发货
			this.hasGot = true
			// this.awardDetail = '您的大奖正在备货中，请注意查看收货信息耐心等待吧'
			this.awardDetail = '奖品将在3-20个工作日内发出，请耐心等待吧！'
		}else if(datas.status == 4){ // 中奖已经发货
			this.hasGot = true
			this.awardDetail = `您的奖品已发货，物流单号：${datas.logistics_code}，请注意接听快递小哥电话等待收件吧`
		}
	},
	onShow() {

	},
	methods: {
		onNextClick(){
			// let nextList = getNextPoint();
			// if(nextList.length > 0){
			// 	uni.redirectTo({
			// 		url:`/pages/attractionDetail/attractionDetail?id=${nextList[0]}`
			// 	})
			// }
			uni.redirectTo({
				url:`/pages/index/index`
			})
		},
		async onOpenCheckpoint(){
			if(!this.hasAddress){
				if(isEmpty(this.name)){
				toast("请输入名字")
				return
			}
			if(isEmpty(this.phone)){
				toast("请输入手机号")
				return
			}
			if(this.region.length === 0){
				toast("请选择区域")
				return
			}
			if(isEmpty(this.address)){
				toast("请输入地址")
				return
			}
			}

			let res = await getUserBoxPrizeGet({
					params:{
						"user_treasure_box_id": parseInt(this.box_id),
						"receiver_name": this.hasAddress ?this.datas.receiver_name : this.name,
						"receiver_address": this.hasAddress ?this.datas.receiver_address :this.address,
						"receiver_city": this.hasAddress ?this.datas.receiver_city :`${this.region[0]}${this.region[1]}${this.region[2]}`,
						"receiver_phone": this.hasAddress ?this.datas.receiver_phone :this.phone,
					}
				});
			toast("领取成功")
			setTimeout(()=> {

				uni.reLaunch({
					url:`/pages/index/index`
				})
			}, 1500)

		},
		onRegionChange(e){
			this.region = e.mp.detail.value
		},
		onNameInput(e){
			this.name = e.mp.detail.value;
		},
		onpPhoneInput(e){
			this.phone = e.mp.detail.value;
		},
		onaAddressInput(e){
			this.address = e.mp.detail.value;
		},
	}
};
</script>

<style lang="stylus">
	page{
		background: #C39167;
		height 100%
		width 100%
	}

	.content{
		position relative
		height 100%
		width 100%
		display flex
		flex-direction column
		align-items center

		.box{
			background: #F9E5A1;
			box-shadow: 0 8rpx 14rpx 5rpx rgba(165,79,49,0.68), inset 0 2rpx 0 0 rgba(255,255,255,0.74), inset 0 -2rpx 1rpx 0 #E29F45;
			border-radius: 20rpx;
		}
		.top-view{
			position relative
			width 100%
			.top-box-bg{
				position absolute
				left 0
				top 0
				width 100%;
				height 150rpx
			}
			.topBox{
				margin 20rpx 20rpx 0 20rpx
				min-height 170rpx
				// width 710rpx
				display flex
				align-items center

				// padding 32rpx
				.box-content{
					background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
					border: 2rpx solid #E8A974;
					border-radius: 12rpx;
					width 570rpx
					padding 26rpx
					margin 20rpx
					>text{
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #844425;
						letter-spacing: 0;
						line-height: 36rpx;
					}
				}
			}
			.show-icon{
				width 150rpx;
				height 196rpx;
				position absolute;
				right 20rpx
				bottom 0rpx
			}
			.lianjie{
				position absolute
				left 38rpx;
				bottom -40rpx
				height 60rpx;
				width 678rpx;
				z-index 100
			}
		}

		.bottomBox{
			margin-top 10rpx
			width 710rpx
			position relative
			display flex
			flex-direction column
			justify-content start
			align-items center
			padding-bottom 100rpx
			border-radius 20rpx 20rpx 0 0
			.bottom-title{
				background: #F9E5A1;
				box-shadow: 0 8rpx 11rpx 0 rgba(165,79,49,0.68), inset 0 2rpx 0 0 rgba(255,255,255,0.74), inset 0 -2rpx 1rpx 0 #E29F45;
				border-radius: 31rpx;
				font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #844425;
				letter-spacing: 4.31rpx;
				padding 10rpx 107rpx
				margin-top 40rpx
			}
			.bottom-detail{
				background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
				border: 2rpx solid #E8A974;
				border-radius: 23rpx;
				margin-top 30rpx
				width 670rpx
				padding 30rpx

				.award-detail{
					display flex
					align-items center

					>image{
						background: #645217;
						border-radius: 15rpx;
						width 90rpx
						height 90rpx
						display block
					}
					>text{
						margin-left 30rpx
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #844425;
						letter-spacing: 0.14px;
					}
				}
				.info-detail{
					padding-bottom 100rpx
					.cu-form-group{
						padding 0
						background-color rgba(0,0,0,0)
						border-bottom: 1px dashed #E8A974;
						height 96rpx
						.title {
							text-align-last: justify;
							min-width: calc(4em + 60rpx);
							font-family: PingFangSC-Semibold;
							font-size: 28rpx;
							color: #844425;
							letter-spacing: 5.21rpx;
						}
						.placeholderStyle{
							font-family: PingFangSC-Regular;
							font-size: 28rpx;
							color: rgba(132,68,37,0.50);
							letter-spacing: 5.38rpx;
							line-height: 36rpx;
						}
					}

				}
			}
		}

		.btn-open{
			margin-top 20rpx
			width 350rpx
			height 130rpx
			position fixed;
			bottom 60rpx
			>image{
				position absolute;
				left 0;
				top 0;
				width 100%;
				height 100%;
				display block
			}
			>text{
				position relative
				font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				color: #FFFFFF;
				letter-spacing: 5.544px;
				line-height 130rpx
			}
		}
	}

</style>
